﻿KISSY.use("waterfall,ajax,template,node,button", function (S, Waterfall, io, Template, Node, Button) {
    var $ = Node.all;

    var tpl = Template($('#tpl').html()),//获取该script中的代码
        nextpage = 1,
        waterfall = new Waterfall.Loader({//加载动态流布局
            container:"#ColumnContainer",
            adjustEffect:{
                duration:0.5,
                easing:"easeInStrong"
            },
            load:function (success, end) {
                $('#loadingPins').show();
                S.ajax({
//                    data:{
//                        'method':'flickr.photos.search',
//                        'api_key':'5d93c2e473e39e9307e86d4a01381266',
//                        'tags':'rose',
//                        'page':nextpage,
//                        'per_page':60,
//                        'format':'json'
//                    },
//                    url:'http://api.flickr.com/services/rest/',
//                          dataType:"jsonp",
//                          jsonp:"jsoncallback",
                	data:{
                		'per_page':60//需要传入的参数，每次取得数据条数
                	},
                	url:'/application/searchPhotos',//请求的地址
                	dataType:"json",//数据类型
                	json:"jsoncallback",
                    success:function (d) {
                        // 如果数据错误, 则立即结束
                        if (d['stat'] !== 'ok') {
                            alert('加载数据中出现错误!');
                            end();
                            return;
                        }
                        // 如果到最后一页了, 也结束加载
                        nextpage = d['photos'].page + 1;
                        if (nextpage > d['photos'].pages) {
                            end();
                            return;
                        }
                        // 拼装每页数据
                        var items = [];
                        S.each(d['photos']['photo'], function (item) {
                        	//计算单个显示的高度
                            item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height
                            //添加封装的数据
                            items.push(new S.Node(tpl.render(item)));
                        });
                        success(items);
                    },
                    complete:function () {
                        $('#loadingPins').hide();
                    }
                });
            },
            minColCount:2,//最小显示的行数
            colWidth:228,//显示行的宽度
            effect:'show',//动画效果 默认为 { effect:”fadeIn”, duration:1 }, 
            duration:1
        });
    //调整布局之后触发, 当页面初始时有数据块, 或改变窗口大小, 都会在调用 adjust 之后触发, 相当于 adjust 的 callback;
    waterfall.on('adjustComplete', function () {
        S.log('after adjust complete!');
    });
    //添加完数据块到容器之后触发, 针对于动态加载;
    waterfall.on('addComplete', function () {
        S.log('after add complete!');
    });
    // scrollTo
    $('#BackToTop').on('click', function (e) {
        e.halt();
        e.preventDefault();
        $(window).stop();
        $(window).animate({
            scrollTop:0
        }, 1, "easeOut");
    });

    var b1 = new Button({
        content:"停止加载",
        render:"#button_container",
        prefixCls:"goog-"
    });

    // 点击按钮后, 停止瀑布图效果 暂不需要以下两个事件
    b1.render();

    b1.on("click", function () {
        waterfall.destroy();
    });

    $("#ColumnContainer").delegate("click", ".del", function (event) {
        var w = $(event.currentTarget).parent(".ks-waterfall");
        waterfall.removeItem(w, {
            callback:function () {
                alert("删除完毕");
            }
        });
    });


    $("#ColumnContainer").delegate("click", ".grow", function (event) {
        var w = $(event.currentTarget).parent(".ks-waterfall");
        waterfall.adjustItem(w, {
            process:function () {
                w.append("<p>i grow height by 100</p>");
            },
            callback:function () {
                alert("调整完毕");
            }
        });
    });
    
    //一直不显示，想要的效果出不来的原因：样式.showDiv中不能设置display。这个属性一定要写在style中。
    //鼠标经过显示3个按钮   第一个参数事件名称 可以放多个 如 'mouseenter mouseleave'
    $('#ColumnContainer').delegate('mouseenter','.ks-waterfall', function (event) {
    	 var id ='#show'+$(event.currentTarget)[0].id;
    	 $(id).show();
    });
    //鼠标离开，隐藏层
    $('#ColumnContainer').delegate('mouseleave','.ks-waterfall', function (event) {
   	 var id ='#show'+$(event.currentTarget)[0].id;
   	 $(id).hide();
   });

});
